<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../js/vue.js"></script>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>
    我是一个子组件，花火好;
  </div>
</template>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"第一次，系统的学VUE"
        },
        methods:{
          btnClick(){
            //$children,这种方式拿到子组件数组，然后根据下表去获取想要的组件，耦合度太高，
            // 如果想要添加一个组件，所有的代码都需要改，这种方法明显不合适。
            //此时就要引用一个另外一个方法$refs
            // console.log(this.$children[0].name);
            // this.$children[0].showMessage()
            console.log(this.$refs.aaa);
            this.$refs.aaa.showMessage()
          }
        },
        components:{
          cpn:{
            template:`#cpn`,
            data(){
              return{
                name:"哈哈哈"
              }
            },
            methods:{
              showMessage(){
                console.log("子组件的ShowMessage方法展示了");
              }
            }
          }
        }
    })
</script>

</body>
</html>